<template>
  <div>
    <div ref="buildingRankChart" style="width:90%;margin-top:20px;height: 240px;background-repeat: no-repeat;background-size:auto 100%;" :style="'background-image: url(' + require('@/assets/img/content-bg.png') + ');'">
    </div>
    <div style="position: relative;float: left;top: -255px;left: 190px;font-size: 17px;height: 25px;font-style: italic;">
      今日耗能排名
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      list: [
        {
          name: null,
          use: {
            increaseCashValue: null,
            increaseStandValue: null
          }
        }
      ],
      rankColor: [
        '#bc002d',
        '#00008b',
        '#f00',
        '#ffde00',
        '#002a8f',
        '#003580',
        '#ed2939',
        '#000',
        '#003897',
        '#f93',
        '#024fa2',
        '#000',
        '#00247d',
        '#ef2b2d',
        '#dc143c',
        '#d52b1e',
        '#e30a17',
        '#00247d',
        '#b22234'
      ],
      option: {
        grid: {
          left: '4.5%',
          right: '2%',
          bottom: '5.5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        backgroundColor: '',
        xAxis: {
          max: 'dataMax'
        },
        yAxis: {
          type: 'category',
          splitLine: { show: false},
          data: ['住院部', '行政楼', '办公楼', '教学楼', '心电楼'],
          inverse: true,
          axisLabel: {
            color: 'white'
          }
        },
        series: [
          {
            realtimeSort: true,
            type: 'bar',
            data: [],
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }
        ],
        legend: {
          show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
    }
  },
  name: "map-view",
  mounted() {
    this.fetchData()
    this.refreshData()
  },
  unmounted() {
  },
  methods: {
    refreshData: function () {
      setInterval(this.fetchData, 1000 * 60 * 10)
    },
    fetchData: function (){
      const data = {content: {dateType: 'day'}}
      this.$axios({url:"/ems/client/index/map/subject/list", data: data}).then((content) => {
        this.list = content.list
        this.initChart()
      })
    },
    initChart: function () {
      this.option.series[0].data = [];
      this.option.yAxis.data = []
      for (let i = 0; i < this.list.length; i++) {
        const item = this.list[i]
        this.option.series[0].data.push(this.$doubleVal(item.use.increaseStandValue))
        this.option.yAxis.data.push(item.name)
      }
      const rankColor = this.rankColor;
      this.option.series[0].itemStyle = {
        color: function (param) {
          return rankColor[param.dataIndex];
        }
      };
      this.$nextTick(() => {
        this.chart = this.$echarts.init(this.$refs.buildingRankChart)
        this.chart.setOption(this.option)
      })
    }
  },
};
</script>
<style>
</style>
